<template>
  <div class="bg-white/95 backdrop-blur-sm border-b border-gray-200/50 p-4 sticky top-0 z-10 shadow-sm">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center shadow-sm">
          <span class="text-white font-bold text-sm">{{ question.id }}</span>
        </div>
        <div>
          <h2 class="text-xl font-bold text-gray-900">{{ question.title }}</h2>
          <div class="flex items-center space-x-3 mt-1">
            <Badge 
              :variant="getDifficultyVariant(question.difficulty)"
              size="sm"
            >
              {{ getDifficultyLabel(question.difficulty) }}
            </Badge>
            <div class="flex items-center text-gray-500 text-xs">
              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
              </svg>
              <span>{{ question.submission_count || 0 }} 提交</span>
            </div>
            <div class="flex items-center text-gray-500 text-xs">
              <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
              </svg>
              <span>{{ Math.round((question.acceptance_rate || 0) * 100) }}% 通过率</span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex space-x-2">
        <Button 
          :variant="isCodeCompletionDisabled ? 'danger' : 'success'"
          size="sm"
          @click="emit('toggleCodeCompletion')"
          :title="isCodeCompletionDisabled ? '启用代码补全' : '禁用代码补全'"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path v-if="isCodeCompletionDisabled" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path>
            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
        </Button>
        <Button 
          :variant="isQuestionFullscreen ? 'primary' : 'outline'"
          size="sm"
          @click="emit('toggleQuestionFullscreen')"
          :title="isQuestionFullscreen ? '退出全屏' : '题目全屏'"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path v-if="!isQuestionFullscreen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"></path>
            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.5 3.5M15 9h4.5M15 9V4.5M15 9l5.5-5.5M9 15v4.5M9 15H4.5M9 15l-5.5 5.5M15 15h4.5M15 15v4.5m0-4.5l5.5 5.5"></path>
          </svg>
        </Button>
        <Button 
          :variant="question.is_favorited ? 'warning' : 'outline'"
          size="sm"
          @click="emit('toggleFavorite')"
        >
          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
          </svg>
          {{ question.is_favorited ? '已收藏' : '收藏' }}
        </Button>
        <Button 
          variant="outline"
          size="sm"
        >
          <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.367 2.684 3 3 0 00-5.367-2.684z"></path>
          </svg>
          分享
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Button from '@/components/ui/Button.vue'
import Badge from '@/components/ui/Badge.vue'
import type { Question, Difficulty } from '@/types'

interface Props {
  question: Question
  isCodeCompletionDisabled: boolean
  isQuestionFullscreen: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  toggleCodeCompletion: []
  toggleQuestionFullscreen: []
  toggleFavorite: []
}>()

const getDifficultyLabel = (difficulty: Difficulty) => {
  const labels = {
    'Easy': '简单',
    'Medium': '中等', 
    'Hard': '困难'
  }
  return labels[difficulty] || difficulty
}

const getDifficultyVariant = (difficulty: Difficulty) => {
  const variants = {
    'Easy': 'success',
    'Medium': 'warning',
    'Hard': 'danger'
  } as const
  return variants[difficulty] || 'default'
}
</script>

